<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网工工之战 - 登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
</head>
<body>
    <!-- 视频背景 -->
    <div class="video-container">
        <video id="bg-video" autoplay muted loop>
            <source src="{{ url_for('static', filename='videos/1.mp4') }}" type="video/mp4">
        </video>
    </div>

    <!-- 主内容 -->
    <div class="main-container">
        <!-- 品牌介绍 -->
        <div class="brand-intro" id="brandIntro">
            <img src="{{ url_for('static', filename='images/logo.png') }}" 
                 class="brand-logo"
                 alt="网工工之战">
            <h1 class="brand-title">网工工之战</h1>
            <p class="brand-slogan">开启你的网络工程师之旅，挑战极限，成为传奇！</p>
            <button class="login-btn" id="showLoginBtn">立即登录</button>
        </div>

        <!-- 登录框 -->
        <div class="auth-card" id="loginCard">
            <div class="brand-header">
                <img src="{{ url_for('static', filename='images/logo.png') }}" 
                     class="header-logo"
                     alt="网工工之战">
                <h2 class="header-title">用户登录</h2>
            </div>

            <!-- 错误提示 -->
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-danger">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <!-- 登录表单 -->
            <form method="POST" action="{{ url_for('auth.login') }}">
                <div class="form-group">
                    <i class="input-icon fas fa-user"></i>
                    <input type="text" 
                           class="form-control"
                           name="username"
                           id="username"
                           placeholder="用户名"
                           required>
                </div>

                <div class="form-group" style="position: relative;">
                    <i class="input-icon fas fa-lock"></i>
                    <input type="password" 
                           class="form-control"
                           name="password"
                           id="password"
                           placeholder="密码"
                           required>
                    <div class="password-loader" id="passwordLoader">
                        <i class="fas fa-spinner fa-spin"></i>
                    </div>
                </div>
                
                <!-- 添加记住密码选项 -->
                <div class="remember-me">
                    <input type="checkbox" id="rememberPassword" name="remember">
                    <label for="rememberPassword">记住密码</label>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-sign-in-alt me-2"></i>登录游戏
                </button>

                <div class="auth-link">
                    <a href="#" data-bs-toggle="modal" data-bs-target="#registerModal">
                        创建新账号
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册弹窗 -->
    <div class="modal fade register-modal" id="registerModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-user-plus me-2"></i>创建新账号
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ url_for('auth.register') }}">
                        <div class="form-group mb-3">
                            <i class="input-icon fas fa-user"></i>
                            <input type="text" 
                                   class="form-control"
                                   name="username"
                                   placeholder="用户名"
                                   required>
                        </div>

                        <div class="form-group mb-3">
                            <i class="input-icon fas fa-lock"></i>
                            <input type="password" 
                                   class="form-control"
                                   name="password"
                                   placeholder="密码"
                                   required>
                        </div>

                        <div class="form-group mb-4">
                            <i class="input-icon fas fa-lock"></i>
                            <input type="password" 
                                   class="form-control"
                                   name="confirm_password"
                                   placeholder="确认密码"
                                   required>
                        </div>

                        <div class="form-group">
                            <i class="input-icon fas fa-users"></i>
                            <select class="form-control custom-select" id="role" name="role" required>
                                <option value="">选择角色类型</option>
                                <option value="查看员">普通玩家</option>
                                <option value="管理员">管理员</option>
                            </select>
                        </div>

                        <div class="form-group" id="adminKeyGroup" style="display: none;">
                            <i class="input-icon fas fa-key"></i>
                            <input type="text" 
                                   class="form-control"
                                   name="admin_key"
                                   placeholder="管理员密钥">
                        </div>

                        <button type="submit" class="btn btn-primary mt-3">
                            <i class="fas fa-user-check me-2"></i>创建账号
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/login.js') }}"></script>
</body>
</html>